<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理中心</title>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        a {
            text-decoration: none;
            cursor: pointer;
        }

        table {
            border: 1px solid #ccc;
        }

        table th {
            text-align: center;
            background-color: #f1f1f1;
        }

        table td:nth-child(1) {
            width: 300px;
        }
    </style>
</head>

<body>
    <h1 style="border-bottom: 1px solid #ccc; padding-bottom: 10px;">管理中心</h1>

    <p>
        <a href="/new.html">新建博客</a>
    </p>

    <div style="margin-bottom: 10px;">
        <input type="text" id="text-keyword">
        <button id="btn-search">搜索</button>
    </div>
    <table id="table-container">
        <tr>
            <th>博客标题</th>
            <th colspan="2">操作</th>
        </tr>
        <tr>
            <!-- <td>
                <a href="/detail.html">标题</a>
            </td>
            <td>
                <a href="/edit.html">编辑</a>
            </td>
            <td>
                <a class="item-del">删除</a>
            </td>
        </tr> -->

    </table>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

    <script>
        // 发送 get 请求
        function get(url) {
            return $.get(url)
        }

        // 发送 post 请求
        function post(url, data = {}) {
            return $.ajax({
                type: 'post',
                url,
                data: JSON.stringify(data),
                contentType: "application/json",
            })
        }

        // 获取 url 参数
        function getUrlParams() {
            let paramStr = location.href.split('?')[1] || ''
            paramStr = paramStr.split('#')[0]
            const result = {}
            paramStr.split('&').forEach(itemStr => {
                const arr = itemStr.split('=')
                const key = arr[0]
                const val = arr[1]
                result[key] = val
            })
            return result
            console.log(result);
        }

        // 获取 dom 元素
        const $textKeyword = $('#text-keyword')
        const $btnSearch = $('#btn-search')
        const $tableContainer = $('#table-container')

        // 拼接接口 url
        let url = '/api/blog/list?isadmin=1'  // 增加一个 isadmin=1 参数，使用登录者的用户名，后端也需要修改 ！！！
        const urlParams = getUrlParams()
        if (urlParams.keyword) {

            url += '&keyword=' + urlParams.keyword
        }

        // 加载数据
        get(url).then(res => {
            if (res.error !== 0) {
                alert(res.msg || '数据错误')
                return
            }

            // 显示数据
            const data = res.data || []
            data.forEach(item => {
                //_blank – 在新窗口中打开链接
                $tableContainer.append($(`
                    <tr>
                        <td>
                            <a href="/detail.html?id=${item.id}" target="_blank">${item.title}</a>
                        </td>
                        <td>
                            <a href="/edit.html?id=${item.id}">编辑</a>
                        </td>
                        <td>
                            <a data-id="${item.id}" class="item-del">删除</a>
                        </td>
                    </tr>
                `))
            })
        })

        // 搜索
        $btnSearch.click(() => {
            const keyword = $textKeyword.val()
            location.href = '/admin.html?keyword=' + keyword
        })

        // 删除
        $tableContainer.click(e => {
            //e.target指向的是事件中真正触发事件的元素
            const $target = $(e.target)
            //$target.hasClass 查找是否包含item-del
            if ($target.hasClass('item-del') === false) {
                return
            }

            if (confirm('确定删除？')) {
                // console.log(1);
                const url = '/api/blog/delete?id=' + $target.attr('data-id')
                post(url).then(res => {
                    console.log(res);
                    if (res.error !== 0) {
                        alert('操作错误,请查看是否登录！')
                        location.href = '/login.html'
                        return
                    }
                    alert('删除成功')
                    location.href = location.href
                })
            }
        })

    </script>
</body>

</html>